<template>
    <div>
        <el-row>
                <el-col :span="24">
                    <div>
                        <span style="font-size: 16px; color: rgb(51, 51, 51);">检查综合意见</span>
                        <p style=" color: #666;line-height: 28px; margin:0 0 35px;">{{tableData.correctiveReportDto.current_edu_opinion}}</p>
                    </div>
                </el-col>
                <el-col :span="24">
                    <el-tabs v-model="activeName"  >
                        <el-tab-pane :label="'整改区 ( ' + reformNumber + '项 )'" name="corrected">
                            <el-col :span="24">
                                <div class="item-colum">
                                    <span class="item-column-title" style="font-size:14px; color:#333">整改工作情况</span>
                                    <el-input
                                            v-if="tableData.correctiveReportDto.suggestion && tableData.correctiveReportDto.suggestion.length !== ''"
                                            :autosize="{ minRows: 4}"
                                            resize="none"
                                            class="showTextConter"
                                            type="textarea"
                                            v-model="tableData.correctiveReportDto.suggestion"
                                            readonly>
                                    </el-input>
                                    <p v-else>未填写整改工作情况</p>
                                </div>

                                  <div style="margin-top:20px;" v-if="tableData.correctiveReportDto.status === 2 && role===2">
                                      <el-form label-width="100px">
                                        <el-form-item label="批注状态：">
                                            <el-checkbox-group v-model="checkList" @change="filterData">
                                                <el-checkbox :label="1">合格</el-checkbox>
                                                <el-checkbox :label="2">不合格</el-checkbox>
                                                <el-checkbox :label="0">未选择</el-checkbox>
                                            </el-checkbox-group>
                                       </el-form-item>
                                      </el-form>
                                     
                                  </div>

                                
                                <ul class="corrected-item">
                                    <li v-for="(item, index) in tableDataFilter" :key="index">
                                        <div v-if=" item.correctiveItemDto.status === 1 || item.correctiveItemDto.status == 3" class="list-item">

                                            <p class="check-item-desc">
                                                {{ item.checkItemDescDTO.check_item_three_order_number + ' ' + item.checkItemDescDTO.check_item_three }}
                                            </p>
                                            <div class="item-title-s step1">
                                                检查信息
                                            </div>
                                            <div class="item-content ">
                                        <div class="check-item-images item-column" v-if="item.checkItemDescDTO.image_list.length > 0">
                                                <span class="item-column-title">图片</span>
                                                <ul class="image-list">
                                                    <li v-for="(imageItem, index) in item.checkItemDescDTO.image_list" :key="index">
                                                        <img :src="basis_url + imageItem.path" alt="" @click="handlePictureCardPreview({url:basis_url + imageItem.path})" />
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="check-item-building-room item-column" v-if="item.checkItemDescDTO.building_room.length > 0">
                                                <span class="item-column-title">涉及房间</span>
                                                <div>
                                                    <el-tag
                                                            v-for="(tagRoom, index) in item.checkItemDescDTO.building_room"
                                                            :key="index"
                                                            type="success"
                                                            style="margin-right:15px;"
                                                    >
                                                        {{tagRoom.building}}
                                                    </el-tag>
                                                </div>
                                            </div>
                                            <div class="check-item-building-info item-column" v-if="item.checkItemDescDTO.desc.length > 0">
                                                <span class="item-column-title">问题描述</span>

                                                <el-input
                                                        :autosize="true"
                                                        type="textarea"
                                                        resize="none"
                                                        class="showTextConter"
                                                        v-model="item.checkItemDescDTO.desc"
                                                        readonly>
                                                </el-input>

                                            </div>
                                            </div>
                                           
                                            <div class="item-title-s step2">
                                                整改信息
                                            </div>
                                         
                                            <el-row :gutter="40" v-for="(checkItemInfo, checkItemindex) in item.correctiveItemDto.check_item_info" :key="checkItemindex">
                                                 <div v-if="checkItemInfo.images.length || checkItemInfo.reason.length || checkItemInfo.measure.length || checkItemInfo.files.length">
                                                <div class="items-column-row">
                                                         <span class="items-column-row-title">整改内容 {{checkItemindex + 1}}</span>
                                                        <el-row :gutter="40">
                                                        <el-col :span="24">
                                                            <div class="check-item-effect-images items-column-row-column">
                                                                <span class="item-column-title">图片</span>
                                                                <ul class="image-list" v-if="checkItemInfo.images.length > 0">
                                                                    <li v-for="(imageItem, imageIndex) in checkItemInfo.images" :key="imageIndex">
                                                                        <img :src="basis_url + imageItem.path" alt="" @click="handlePictureCardPreview({url:imageItem.path})"/>
                                                                    </li>
                                                                </ul>
                                                                <p v-else style="line-height:16px; margin:0;">
                                                                    暂无
                                                                </p>
                                                            </div>
                                                        </el-col>
                                                       
                                                    </el-row>

                                                    <el-row :gutter="40">
                                                        <p></p>
                                                        <p></p>
                                                        <el-col :span="24">
                                                            <div class="check-item-cause items-column-row-column">
                                                                <span class="item-column-title">原因分析</span>
                                                                <el-input
                                                                        type="textarea"
                                                                        resize="none"
                                                                        autosize
                                                                        class="showTextConter"
                                                                        placeholder="未填写原因分析"
                                                                        v-model="checkItemInfo.reason"
                                                                        readonly>
                                                                </el-input>
                                                            </div>
                                                        </el-col>
                                                        <el-col :span="24">
                                                            <div class="check-item-effect items-column-row-column">
                                                                <span class="item-column-title">整改措施与结果</span>
                                                                <el-input
                                                                        type="textarea"
                                                                        resize="none"
                                                                        autosize
                                                                        class="showTextConter"
                                                                        placeholder="未填写整改措施与结果"
                                                                        v-model="checkItemInfo.measure"
                                                                        readonly>
                                                                </el-input>
                                                            </div>
                                                        </el-col>
                                                         <el-col :span="24" >

                                                            <div class="check-item-effect-file items-column-row-column" >
                                                                <span class="item-column-title">附件</span>
                                                                <div v-if="checkItemInfo.files && checkItemInfo.files.length > 0">
                                                                    <a v-for="(fileItem, filesIndex) in checkItemInfo.files"
                                                                       href="javascript:;"
                                                                       @click="downloadFile(fileItem.path,fileItem.origin_name)"
                                                                       :key="filesIndex"
                                                                    >
                                                                        {{ fileItem.origin_name }}
                                                                    </a>
                                                                </div>
                                                                <p v-else style="line-height:16px; margin:0;">
                                                                    暂无
                                                                </p>
                                                            </div>
                                                        </el-col>
                                                    </el-row>

                                                </div>
                                                 </div>
                                            </el-row>
                                         

                                            <div>
                                                <div class="item-title-s step3">
                                                    批注信息
                                                </div>

                                                 <!-- <div class="" v-if="item.correctiveItemDto.audit && $route.query.s==='1' || [3,4,41,21].includes(tableData.correctiveReportDto.status )|| item.correctiveItemDto.audit_reason !== '' &&  item.correctiveItemDto.audit_reason">
                                                    <div style="margin-bottom:20px;margin-top:20px;" >
                                                        <el-tag type="success" v-if="item.correctiveItemDto.audit===1">合格</el-tag>
                                                        <el-tag type="danger" v-else>不合格</el-tag>

                                                    </div>
                                                    <div>
                                                        <el-input
                                                         :autosize="{ minRows:2}"
                                                           class="showTextConter"
                                                                readonly=""
                                                                type="textarea"
                                                             
                                                                v-model="item.correctiveItemDto.audit_reason">
                                                        </el-input>
                                                    </div>
                                                </div> -->


                                                 <div  style="margin-top:20px;">

                                                    <div class="item-content" v-if="tableData.correctiveReportDto.status === 2 && role===2">
                                                        <div>
                                                        <el-radio
                                                            
                                                            v-model="item.correctiveItemDto.audit"
                                                            :label="1"
                                                        >合格</el-radio>
                                                        <el-radio
                                                
                                                            v-model="item.correctiveItemDto.audit"
                                                            :label="2"
                                                        >不合格</el-radio>
                                                        </div>
                                                        <div>
                                                        <el-input
                                                            :autosize="{ minRows: 2}"
                                                            :maxlength="400"
                                                            type="textarea"
                                                            placeholder="请输入内容审核意见，字数不超过400字"
                                                            v-model="item.correctiveItemDto.audit_reason"
                                                        ></el-input>
                                                        </div>
                                                    </div>

                                                    <div v-else-if="item.correctiveItemDto.audit && item.correctiveItemDto.audit!==0" class="" >
                                                            <div style="margin-bottom:20px;">
                                                                <el-tag type="success" v-if="item.correctiveItemDto.audit===1">合格</el-tag>
                                                                <el-tag type="danger" v-else>不合格</el-tag>

                                                            </div>
                                                            <div>
                                                                <el-input
                                                                v-if="item.correctiveItemDto.audit_reason&& item.correctiveItemDto.audit_reason.length"
                                                                :autosize="{ minRows: 2}"
                                                                    class="showTextConter"
                                                                        readonly=""
                                                                        type="textarea"
                                                                        :rows="4"
                                                                        v-model="item.correctiveItemDto.audit_reason">
                                                                </el-input>
                                                            </div>
                                                        </div>

                                                    </div>
                                            </div>

                                        </div>
                                    </li>
                                </ul>
                            </el-col>
                        </el-tab-pane>
                        <el-tab-pane :label=" '待整改区 ( ' +  unReformNumber + ' 项  )'" name="unCorrected" v-show='paneShow'>
                            <el-col :span="24">
                                <ul class="corrected-item">
                                    <li v-for="(item, index) in tableData.correctiveItems" :key="index">
                                        <div v-if="item.correctiveItemDto.status === 2" class="list-item">
                                            <p class="check-item-desc">
                                                {{ item.checkItemDescDTO.check_item_three_order_number + ' ' + item.checkItemDescDTO.check_item_three }}
                                            </p>
                                            <div class="item-title-s step1">
                                                检查信息
                                            </div>
                                            <div class="item-content">
                                        <div class="check-item-images item-column" v-if="item.checkItemDescDTO.image_list.length > 0">
                                                <span class="item-column-title">图片</span>
                                                <ul class="image-list">
                                                    <li v-for="(imageItem, index) in item.checkItemDescDTO.image_list" :key="index">
                                                        <img :src="basis_url + imageItem.path" alt="" @click="handlePictureCardPreview({url:imageItem.path})" />
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="check-item-building-room item-column"  v-if="item.checkItemDescDTO.building_room.length > 0">
                                                <span class="item-column-title">涉及房间</span>
                                                <div>
                                                    <el-tag
                                                            v-for="(tagRoom, index) in item.checkItemDescDTO.building_room"
                                                            :key="index"
                                                            type="success"
                                                            style="margin-right:15px;"
                                                    >
                                                        {{tagRoom.building}}
                                                    </el-tag>
                                                </div>
                                            </div>
                                            <div class="check-item-building-info item-column" v-if="item.checkItemDescDTO.desc.length > 0">
                                                <span class="item-column-title">问题描述</span>
                                                <p>
                                                    <el-input
                                                             :autosize="{ minRows: 2}"
                                                            type="textarea"
                                                            resize="none"
                                                            ref="qaaa"
                                                            class="showTextConter"
                                                            v-model="item.checkItemDescDTO.desc"
                                                            readonly>
                                                    </el-input>
                                                </p>
                                            </div>
                                              </div>
                                             <div class="item-title-s step1">
                                            未整改信息
                                            </div>
                                              <div class="item-content" v-if='item.correctiveItemDto.no_reason&&item.correctiveItemDto.no_reason.length || item.correctiveItemDto.no_reason_files&& item.correctiveItemDto.no_reason_files.length'>

                                                <div class="check-item-corrected item-column">
                                                <span class="item-column-title">未整改原因及未来整改计划</span>
                                                <el-input
                                                        v-if="item.correctiveItemDto.no_reason && item.correctiveItemDto.no_reason != ''"
                                                         :autosize="{ minRows: 2}"
                                                        type="textarea"
                                                        resize="none"
                                                        class="showTextConter"
                                                        v-model="item.correctiveItemDto.no_reason"
                                                        readonly>
                                                </el-input>
                                                <p v-else style="line-height:16px; margin:0;">
                                                    暂无
                                                </p>
                                            </div>
                                            <div class="check-item-effect-file item-column">
                                                <span class="item-column-title">附件</span>
                                                <div v-if="item.correctiveItemDto.no_reason_files && item.correctiveItemDto.no_reason_files.length > 0">
                                                    <a v-for="(fileItem, index) in item.correctiveItemDto.no_reason_files"
                                                       href="javascript:;"
                                                       @click="downloadFile(fileItem.path,fileItem.origin_name)"
                                                       :key="index">
                                                       {{ fileItem.origin_name }}
                                                    </a>
                                                </div>
                                                <p v-else style="line-height:16px; margin:0;">
                                                    暂无
                                                </p>
                                                <br>
                                            </div>

                                            </div>
                                               <!-- <p v-else  class="item-content"  style="line-height:36px; margin:0;">暂无</p> -->
                        
                                        </div>
                                    </li>
                                </ul>
                            </el-col>
                        </el-tab-pane>
                    </el-tabs>
                </el-col>
            </el-row>
        <el-dialog :visible.sync="dialogShowImages">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>

<script>
   import { saveAs } from '../../common/js/commons';
    export default {
        props:
            {'tableData':{
                require: true
            },
                'role':{
                    require: false,
                    default:1
                }
            }
        ,
        computed:{
            reformNumber(){
               return this.tableData.correctiveItems.filter(item =>{
                    return item.correctiveItemDto.status !== 2
                }).length
            },
            unReformNumber(){
                return this.tableData.correctiveItems.filter(item =>{
                    return item.correctiveItemDto.status === 2
                }).length
            },

        },
        mounted(){
                 setTimeout(()=>{
                                this.paneShow = false
                           
                        },200)
                             this.filterData()
        },
        methods:{
              downloadFile(url, name){
                saveAs(url, name)
            },
                handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogShowImages = true;
            },
            filterData(){
                
                    if (this.checkList.length) {
                    this.tableDataFilter = this.tableData.correctiveItems.filter(
                            item => {
                                if(item.correctiveItemDto.audit !==null){ //audit === null
                                    //checkList: [1,2,0]
                                    return this.checkList.includes(item.correctiveItemDto.audit) && item.correctiveItemDto.status !==2//返回所有整改项并且筛选
                                }else{
                                  return item.correctiveItemDto.status !==2  //返回所有整改项
                                }
                                    
                            }
                        );
                    } else {
                      
                    this.tableDataFilter = []
                    }
            }
        },
        data() {
            return {
                dialogImageUrl:'',
                dialogShowImages:false,
                tableDataFilter:[],
                paneShow:true,
                activeName:'corrected',
                basis_url: "",
                checkList: [1,2,0],
                checkListCopy:[]

            }
        },
    }
</script>
<style >
      .check-item-effect-file{
        min-height:50
    }
      .check-item-images{
            display:table;
        
        }
</style>
<style scoped lang="scss" >
    .mt-20{
        margin-top: 20px;
    }
  
    .box-card{
        padding: 20px 40px;
        .grid-content{
            &.title{
                h4{
                    font-size:24px;
                    color:#101010;
                    margin:0;
                }
                p{
                    display:inline-block;
                    width:200px;
                    color:#333;
                    span{
                        color:#888;
                    }
                }
            }
        }
        .corrected-title{
            font-size:18px;
            color:#101010;
            padding:35px 0 10px;
            line-height:18px;
        }
        .items-column-row{
            background:#f7f7f7;
            overflow:hidden;
            margin:0 20px 20px;
            padding: 20px 40px;
            .items-column-row-title{
                line-height: 20px;
                display: block;
                font-size:16px;
                padding: 20px 0 10px;
                font-weight: bold;
                color: #333;
            }
            .items-column-row-column{
                margin: 10px 0 20px;
            }
        }
        .corrected-item{
            list-style:none;
            padding-left:0;
            li{
                .check-item-desc{
                    font-size:16px;
                    color:#333;
                    line-height: 28px;
                    margin-bottom:0;
                }
                div{
                    &.item-column{
                        padding:30px 0 0;
                    }
                    &.list-item{
                        border:1px solid #e6e6e6;
                        padding:10px 40px;
                        margin-bottom:20px;
                      
                    }
                    &.top-border{
                        border-top:1px solid #e6e6e6;
                        margin-top:20px;
                    }
                    .image-list{
                        width:100%;
                        height:100px;
                        padding: 0;
                        li{
                            width:100px;
                            height:100px;
                            float:left;
                            list-style:none;
                            padding:0;
                            border:1px solid #efefef;
                            margin-right:15px;
                            overflow:hidden;
                            border-radius:8px;
                            img{
                                width:100%;
                                height:100%;
                            }
                        }
                    }
                    p{
                        font-size:14px;
                        color:rgba(102, 102, 102, 1);
                        line-height:24px;
                    }
                    span{
                        &.item-column-title{
                            font-size:14px;
                            font-weight:bold;
                            color:#333;
                            display:block;
                            margin-bottom:10px;
                            line-height:26px;
                        }
                    }
                }
            }
        }
    }
</style>
